<template>
	<view>
		<title v-if="detaildata.title!='' " :title="detaildata.title"></title>
		 <view v-if="JSON.stringify(detaildata.btns) != '[]'" style="margin: 8px 10px; display: flex;flex-direction: row;align-items: center;justify-content: space-around;">
			<view @click="navitoitem(item2)"  class="btns" v-for="(item2, index2) in detaildata.btns" :key="index2" :style="{'color':item2.color,'border-color':item2.color}"  style="border-radius: 3px; border: 1px solid; width: calc((100vw / 3) - 25px); display: flex;flex-direction: row;align-items: center;justify-content: center;">
				<text class="iconfont icon-jia" style="font-size: 12px;"></text> {{item2.text}}
			</view>
		</view>
		<view v-if="JSON.stringify(detaildata.btns) != '[]'" style="margin-bottom: -1px; width: 100%;border-bottom: #f0f0f0 1px solid;"></view>
		<view v-if="detaildata.showstyle!='table'" @longpress="deleteItem(index3,item3)" @click="opengoodsdetail(index3)" v-for="(item3, index3) in detaildata.rows" :key="index3" style=" display: flex;flex-direction: column;align-items: center;">
			<imgcontent :contentdata="item3"></imgcontent>
		</view> 
		<view v-if="detaildata.showstyle=='table'">
			<view class="kingTable">
				<view class="kingFlex">
					<view class="kingSticky kingLeftCon">
						<view @click="cancelIndex" class="kingFlex kingSticky" style="top: 0">
							<view v-if="item.visible" class="tableHead" v-for="(item, index) in detaildata.table_title" :key="index">
								<view  class="tableColmn" :style="{width:item.width, backgroundColor: tableHeadStyle.backgroundColor, fontSize: tableHeadStyle.fontSize, fontWeight: tableHeadStyle.fontWeight }">
								 <view>	{{item.colvalue}}</view>
								</view>
							</view>
						</view>
						<view class="kingFlex first">
							<block v-if="item1.visible" v-for="(item1, index1) in detaildata.table_title" :key="index1">
								<view class="">
									<block v-for="(item, index) in detaildata.rows" :key="index">
										<view v-if="item1.colname!='opt'" @longpress="deleteItem(index,item)"  @click="opengoodsdetail(index)" :style="{width:detaildata.table_title[index1].width, backgroundColor: isIndex == index ? tableClickCol : '' }" class="tableColmn">{{ item.content[0][item1.colname] }}</view>
										<view v-if="item1.colname=='opt'" @click="deleteItem(index,item)" :style="{width:detaildata.table_title[index1].width, backgroundColor: isIndex == index ? tableClickCol : '' }" class="tableColmn"><view class="iconfont icon-shanchu" style="color: #F55C23;"></view> </view>
									</block>
								</view>
							</block>
						</view>
					</view>
				</view>
			</view>
			
		</view>
		
		
	 
		<view v-if="iscontentdetail1"  @click="closemask" style="backface-visibility: hidden;top: 0;right: 0;left: 0;bottom: 0;position: fixed;overflow: hidden;width: 100%;height: 100%;opacity: 1;background-color: rgba(0,0,0,0.4);z-index: 9000;">
			<view @click.stop="" :style="{'height':maskheight+'px'}" style="opacity: 1;background-color: #fff;z-index: 9000;bottom: 0px;position: absolute;width: 100vw;">
				<content2 :contentdata="contentdetail1.showdetail"></content2>
				<view  v-for="(item2, index2) in contentdetail1.inputdetail" :key="index2" style="margin: 0 10px;">
					<view v-if="item2.coltype=='date' && item2.visible" :style="{'background-color':!item2.editable?'#fff':'#f8f8f8'}" style="padding:13px 0px;color: #666;font-size: 14px; display: flex;flex-direction: row;justify-content: space-between;">
						<view style="display: flex;align-items: center;">{{item2.coltext}} <view v-if="item2.isnotnull" style="color: #F55C23;font-size: 6px;" class="iconfont icon-jiufuqianbaoicon14"></view> </view>
						<view style="text-align: left;width: 60vw;"> 
							<picker  :mode="item2.coltype" :disabled="!item2.editable" :value="item2.colvalue" :start="item2.starts" :end="item2.ends" @change="bindDateChange(0,index2,$event)">
								<view class="uni-input" style="color: #aaa;">{{item2.coldisplay==''?'请选择':item2.coldisplay}}</view>
							</picker> 
						</view>
					</view>
					<textdigit v-if="(item2.coltype=='text' || item2.coltype=='digit' || item2.coltype=='number') && item2.visible" :clientType="clientType" :texttype="texttype" :dataobj="item2" :index2="index2" :index3="indexgood" @changeData="changeData(arguments)"></textdigit>
					<stylelayer v-if="item2.coltype=='layer' && item2.visible" :clientType="clientType" :layertype="layertype" :dataobj="item2" :index2="index2" :index3="indexgood" @changeData="changeData(arguments)"></stylelayer>
					<stylelist v-if="item2.coltype=='list' && item2.visible" ref="stylelist" :clientType="clientType"  :listtype="listtype" :dataobj="item2" :index2="index2" :index3="indexgood" :typeindex="typeindex" :styletype="styletype" :modcode="modcode" @changeData="changeData(arguments)"></stylelist>
					<view v-if="(contentdetail1.inputdetail.length-1) != index2 && item2.visible" style="margin-bottom: 1px; height: 1px;width: 100%;border-bottom: #f0f0f0 1px solid;"></view>
				</view> 
				<!-- #ifdef MP-WEIXIN -->
				<cover-view style="height: 40px; display: flex;flex-direction: row;align-items: center;justify-content: space-around;position: absolute;bottom: 0;">
					<cover-view @click="maskbtnclick(item2)" class="btns" v-for="(item2, index2) in btn" :key="index2" :style="{'background-color':item2.color,'width': (100/btn.length)+'vw'}"  style="text-align:center;line-height:40px; height: 100%; color: #fff;  padding: 5px 0; display: flex;flex-direction: row;align-items: center;justify-content: center;">
						 {{item2.name}}
					</cover-view>
				</cover-view>
				<!-- #endif -->
				<!-- #ifdef APP-PLUS || H5 -->
				<view style="height: 40px; display: flex;flex-direction: row;align-items: center;justify-content: space-around;position: absolute;bottom: 0;">
					<view @click="maskbtnclick(item2)" class="btns" v-for="(item2, index2) in btn" :key="index2" :style="{'background-color':item2.color,'width': (100/btn.length)+'vw'}"  style="text-align:center;line-height:40px; height: 100%; color: #fff;  padding: 5px 0; display: flex;flex-direction: row;align-items: center;justify-content: center;">
						 {{item2.name}}
					</view>
				</view>
				<!-- #endif -->
				</view>
		</view>
	</view>
</template>


<script>
	import title from "../title/title.vue"
	import {updaterowvalue} from '../../utils/representation.js'
	import textdigit from "../textdigit/textdigit.vue"
	import stylelayer from "../stylelayer/stylelayer.vue"
	import stylelist from "../stylelist/stylelist.vue"
	import imgcontent from "../imgcontent/imgcontent.vue"
	import content2 from "../content2/content2.vue"
	export default {
		components:{
			title:title,
			textdigit:textdigit,
			stylelayer:stylelayer,
			stylelist:stylelist,
			imgcontent:imgcontent,
			content2:content2
		},
		
		data(){
			return{
				texttype:'addminus',
				layertype:'chooselayer',
				listtype:'chooselist',
				tempdataList: [],
				tempbottomheadercount:{},
				tempcontentdetail1:{},
				contentdetail1:{},
				iscontentdetail1:false,
				maskheight:0,
				btn:[{'name':'取消','btntype':'cancel','color':'#aaa'},{'name':'确认','btntype':'ensure','color':'#f00'}],
				indexitem:0,
				indexgood:0,
				indexgooditem:0,
				tableHeadStyle:{ backgroundColor: '#e0e0e0', fontSize: '14px', fontWeight: 'bold' },
				isIndex: null,
			}
		},
		props:{
			detaildata:{
				type:Object
			},
			index:{
				type:Number
			},
			typeindex:{
				type:Number
			},
			styletype:{
				type:String
			},
			modetype:{
				type:String
			},
			modcode:{
				type:String
			},
			compute_rowcode:{
				type:String
			},
			pagename:{
				type:String
			},
			ckdm:{
				type:String
			},
			datalist:{
				type:Array,
				default () {
				return []
			  }
			},
			lclick:{
				type:Object,
				default(){
					return {}
				}
			},
			bottomheadercount:{
				type:Object,
				default(){
					return {}
				}
			},
			detailbtns:{
				type:Array
			},
			clientType:{
				type:String,
				default(){
					return ""
				}
			}
		},
		
		
		mounted:function(){
			var that = this
			console.log(that.detaildata)
			if(JSON.stringify(that.detaildata.rows)!='[]'){
				var rows = that.detaildata.rows
				for(var j=0;j<rows.length;j++){
					var inputdetail = rows[j].contentdetail1.inputdetail
					if(JSON.stringify(inputdetail)!='[]' && inputdetail!=undefined){
						var listindex = 0
						for(var i=0;i<inputdetail.length;i++){
							if(inputdetail[i].coltype=='list'){
								inputdetail[i]['typeindex'] = listindex
								listindex++
							}
						}
					}
					rows[j].contentdetail1.inputdetail = inputdetail
				}
				that.detaildata.rows = rows
				that.$emit('changeListData',that.index,that.detaildata)
			}
		},
		
		methods:{
			cancelIndex(){
				var that = this
				that.isIndex = null
				// that.contentdetail1 = {}
				// that.compute_rowcode = ''
			},
			
			changeData(args){
				var that = this
				that.contentdetail1.inputdetail[args[1]] = args[2]
				that.indexgooditem = args[1]
				var obj = updaterowvalue(that.indexgooditem,that.indexitem,that.indexgood,that.contentdetail1,that.datalist,that.bottomheadercount)
				that.$options.methods.updateobj(that,obj)
			},
			
			bindDateChange(index,index2,event){
				var that = this
				that.contentdetail1.inputdetail[index2].colvalue = event.detail.value
				that.contentdetail1.inputdetail[index2].coldisplay = event.detail.value
				that.contentdetail1.inputdetail[index2].ismodified = true
				var obj = updaterowvalue(that.indexgooditem,that.indexitem,that.indexgood,that.contentdetail1,that.datalist,that.bottomheadercount)
				that.$options.methods.updateobj(that,obj)
			},
			
			updatelistvalue(content){
				var that = this
				that.$refs.stylelist[content.typeindex2].updatelistvalue(content)
			},
			
			maskbtnclick(item){
				var that = this
				var btntype = item.btntype
				that.iscontentdetail1 = false
				
				if(btntype=='cancel'){
					that.$emit('changeListData2',that.index,that.tempcontentdetail1,that.tempbottomheadercount,that.tempdataList)
				}
				if(btntype=='ensure' && item.clicked!=undefined){
					if(JSON.stringify(item.clicked)!='{}'){
						var itemData = that.datalist[that.index].rows[that.indexgood]
						var btnitem = item
						var tempcont = {}
						tempcont['divtype'] =  that.datalist[that.index].datatype
						tempcont['dataarr'] = []
						var tempdata2 = {}
						var arrcont2 = {}
						arrcont2['datatype'] = itemData.state
						try{
							var datacontent =  itemData.contentdetail1.inputdetail
							console.log(datacontent)
							var rowitem = JSON.stringify(itemData)
							if(JSON.stringify(datacontent) != '[]' ){
								for(var k=0;k<datacontent.length;k++){
									if(datacontent[k].isnotnull && datacontent[k].colvalue==''){
										uni.showModal({
											title: '提示',
											content: datacontent[k].coltext +'不能为空',
											showCancel:false
										});
										return
									}
									if(datacontent[k].ismodified){
										tempdata2[datacontent[k].colname] = datacontent[k].colvalue
									}
								}
							}
						}catch(e){}
						if(JSON.stringify(tempdata2) != '{}'){
							arrcont2['divtype'] =  that.datalist[that.index].datatype
							arrcont2['data'] = tempdata2
							arrcont2['conditions'] =JSON.parse( '{"compute_rowcode":"'+ itemData.compute_rowcode+'"}')
							tempcont['dataarr'].push(arrcont2)
						}
						var commitcontent = []
						commitcontent.push(tempcont)
						var btnname = btnitem.name
						var method = btnitem.clicked.method
						var sessionid = uni.getStorageSync('sessionid')
						var dbid = uni.getStorageSync('dbid')
						var injson = '{"sessionid":"' + sessionid + '","dbid":"' + dbid + '","modcode":"'+that.modcode+'","pagename":"'+that.pagename+'","btnname":"'+btnname+'","compute_rowcode":"'+itemData.compute_rowcode+'","commitcontent":'+JSON.stringify( commitcontent)+'}'
						var data =  '{"method": "'+method+'","parse":"json","injson":'+injson+',"isencode":false}'
						console.log(JSON.parse(data))
						that.$api.assaas(JSON.parse(data)).then((res) => {
							console.log(res)
							if(res.DATA.rtn==1){
								that.$emit('commitItemData')
							}else{
								uni.showModal({
									showCancel:false,
									title: '提示',
									content: res.DATA.errmsg
								})
							}
						})
					}
				}
				that.indexitem  = 0
				that.indexgood  = 0
			},
			
			
			
			closemask(){
				var that = this
				that.iscontentdetail1 = false	
				that.indexitem  = 0
				that.indexgood  = 0		
				that.$emit('changeListData2',that.index,that.tempcontentdetail1,that.tempbottomheadercount,that.tempdataList)
			},
			
			navitoitem(item){
				var that = this
				if(item.clicked!={}){
					var method = item.clicked.method
					if(method!=undefined && method!=''){
						var clicked = item.clicked
						console.log(clicked)
						var modcode = that.modcode
						uni.navigateTo({url:'/pages/choosegood2/choosegood2?method="'+method+'"&modcode='+modcode+'&pagename='+that.pagename+'&compute_rowcode='+that.compute_rowcode+'&ckdm='+that.ckdm})
									
					}else{
						var pagename = item.clicked.pagename
						var argsconditions = {}
						var expargs = item.clicked.expargs
						if(JSON.stringify(expargs)!='[]'){
							var datalist = that.datalist
							for(var i=0;i<datalist.length;i++){
								for(var j=0;j<expargs.length;j++){
									if(expargs[j].datagroup==datalist[i].datagroup){
										var content = datalist[i].content
										for(var k=0;k<content.length;k++){
											if(expargs[j].colname==content[k].colname){
												argsconditions[content[k].colname] = content[k].colvalue
											}
										}
									}
								}
							}
						}
						uni.navigateTo({
							url:'../additems/additems?modcode='+this.modcode+'&pagename='+pagename+'&argsconditions='+JSON.stringify(argsconditions)
						})
					}
				}
			},
			
			opengoodsdetail(index2){
				var that = this
				var clicked ={}
				try{
					 clicked = that.detaildata.click
				}catch(e){
					 clicked = {}
				}
				if(JSON.stringify(clicked)=='{}' || clicked == undefined){
					
				if(that.detaildata.rows[index2].ispopcontentdetail1){
					if(JSON.stringify(that.detaildata.rows[index2].contentdetail1.showdetail)=='{}'){
						var nginxurl = uni.getStorageSync('nginxurl')
						var webname = uni.getStorageSync('webname')
						var sessionid = uni.getStorageSync('sessionid')
						var dbid = uni.getStorageSync('dbid')
						var rowkeyid = that.detaildata.rows[index2].rowkeyid
						uni.showLoading({title: '加载中'})
						if(that.modetype=='infolistdetail'){
							var method = 'appsj_detailall_getview'
						}else{
							var method = 'appsj_detail_getview'
						}
						var injson = '{"sessionid":"' + sessionid + '","dbid":"' + dbid + '","modcode":"'+that.modcode+'","pagename":"'+that.pagename+'","compute_rowcode":"'+that.compute_rowcode+'","rowkeyid":"'+rowkeyid+'"}'
						console.log(injson)
						console.log(method)
						uni.request({
							url: nginxurl + '/' + webname + '/assaas2',
							data: {method: method,parse: 'json',injson: injson,isencode:false},
							method: 'GET',
							header: {'content-type': 'application/json'},
							success: function(res) {
								var result = res.data
								uni.hideLoading()
								console.log(result)
								var obj = {}
								obj['contentdetail1'] = result.contentdetail1
								obj['bottomheadercount']= that.bottomheadercount
								that.datalist[that.index].rows[index2].contentdetail1 = result.contentdetail1
								if(result.contentdetail1.btns!=undefined && JSON.stringify(result.contentdetail1.btns) != '[]'){
									that.btn = result.contentdetail1.btns
								}
								obj['dataList'] = that.datalist
								that.indexgood = index2
								that.$options.methods.updateobj(that,obj)
								setTimeout(()=>{
									uni.hideLoading()
									that.$options.methods.opencontent(that,index2)
								},300)
								
							},
						})
					}else{
						that.$options.methods.opencontent(that,index2)
					}
					
					}
				}else{
					var modcode = that.modcode
					var pagename = clicked.pagename
					var title = clicked.title
					var window = clicked.templatename
					var compute_rowcode = that.detaildata.rows[index2].compute_rowcode
					uni.navigateTo({url:'/pages/editorderdetail/editorderdetail?modcode='+modcode+'&title='+title+'&window='+window+'&pagename='+pagename+'&compute_rowcode='+compute_rowcode})
					
				}
			},
			
			
			deleteItem(index3,item3){
				var that = this
				var lclick = that.lclick
				if(JSON.stringify(lclick)!='{}'){
					var msg = lclick.msgtext
					uni.showModal({
						title: '提示',
						content: msg,
						success: function (res) {
							if (res.confirm) {
								var sessionid = uni.getStorageSync('sessionid')
								var dbid = uni.getStorageSync('dbid')
								var modcode = that.modcode
								var pagename = that.pagename
								var method = lclick.method
								var rowkeyid = item3.rowkeyid
								var compute_rowcode = item3.compute_rowcode
								var injson = '{"sessionid":"' + sessionid + '","dbid":"' + dbid + '","modcode":"'+modcode+'","pagename":"'+pagename+'","compute_rowcode":"'+compute_rowcode+'","rowkeyid":"'+rowkeyid+'"}'
								var data =  '{"method": "'+method+'","parse":"json","injson":'+injson+',"isencode":false}'
								console.log(JSON.parse(data))
								that.$api.assaas(JSON.parse(data)).then((res) => {
									if(res.DATA.rtn==1){
										that.$emit('commitItemData')
									}else{
										uni.showModal({
											showCancel:false,
											title: '提示',
											content: res.DATA.errmsg
										})
									}
								})
							}
						},
					})
				}
			},
			
			opencontent(that,index2){
				that.indexitem = that.index
				that.indexgood = index2
				console.log(that.indexgood)
				that.tempdataList = JSON.parse(JSON.stringify(that.datalist))
				that.tempbottomheadercount = JSON.parse(JSON.stringify(that.bottomheadercount))
				that.iscontentdetail1 = !that.detaildata.rows[index2].iscontentdetail1
				that.contentdetail1 = JSON.parse(JSON.stringify(that.detaildata.rows[index2].contentdetail1))
				that.tempcontentdetail1 = JSON.parse(JSON.stringify(that.detaildata.rows[index2].contentdetail1)) 
				var inputdetail = that.detaildata.rows[index2].contentdetail1.inputdetail
				var templength = 0
				for(var i=0;i<inputdetail.length;i++){
					if(inputdetail[i].visible){
						templength += 1
					}
				}
				var imglength = that.detaildata.rows[index2].contentdetail1.showdetail.content.length
				that.maskheight = 10 + imglength*20 + templength * 44 + 40
			},
			
			
			updateobj(that,obj){
				that.contentdetail1 = obj.contentdetail1
				that.detaildata.rows[that.indexgood].contentdetail1 = obj.contentdetail1
				that.datalist = obj.dataList
				that.datalist[that.index].rows[that.indexgood].contentdetail1 = obj.contentdetail1
				that.bottomheadercount = obj.bottomheadercount
				that.$emit('changeListData2',that.index,that.detaildata,that.bottomheadercount,that.datalist)
			}
			
		}
	}
</script>

<style>
	.kingTable { overflow-x: auto; border-left: 1px solid #999;}
	.kingTable .kingLeftCon { z-index: 9; left: 0; background-color: #ffffff; }
	.kingFlex { display: flex; }
	.kingSticky { position: sticky; position: -webkit-sticky; }
	.tableStyle { }
	.tableHead { border-top: 1px solid #999; }
	.tableColmn { border-right: 1px solid #999; border-bottom: 1px solid #999; width: 50px; height: 30px; line-height: 30px; text-align: center; font-size: 10px; color: #333333; 
	overflow: hidden;overflow-x: hidden;overflow-y: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;}
	
</style>
